<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/reset.css">
    <title>公用头部</title>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>考拉欢迎你！</li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>手机考拉</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <img src="../image/logo.png" alt="" class="l">
            <div class="checks l">
               
                <h1>
                    <input type="text" class="sou" placeholder="搜索一下">
                    <p class="r tu"></p>
                </h1>
            </div>
            <div class="buy r">
                <a href="#">购物车</a>
            </div>
        </div>
    </section>
    <footer>
        <div class="foot">
            <h2 class="l">所有分类</h2>
            <ul class="l">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">海外直购</a>
                </li>
                <li>
                    <a href="">品质奶粉</a>

                </li>
                <li>
                    <a href="">人气面膜</a>
                </li>
                <li>
                    <a href="">充值</a>
                </li>
            </ul>
        </div>
    </footer>
</body>
</html>

<!-- 问题及总结

1.错误：p标签里套了p标签
2.长圆形的形成 (小的值的一半)
3.input 搜索
-->